

<HTML>
<HEAD>
<TITLE>Fifth Test of Section 9.8 of CSS2 Spec</TITLE>

<STYLE TYPE="text/css">
body {display: block; line-height: 200%;
      width: 400px; height: 400px }
p {display: block}
span {display: inline}
#outer {color: red}
#inner {float: right; width: 130px; color: blue}
#sibling {clear:right; color: red}




</STYLE>
</HEAD>




<BODY>
<h1 >
Testing Fifth Testable Statement of Sec 9.8 of CSS2 Specification
</h1>


<ul>
<li  >
5. If clear on sibling is right, the sibling content flows below the float.
</ul>




<h2 >
PASS CRITERIA:
</h2>
If statement #5 is passed then
 <span id="outer"> start of outer contents
 <span id="inner"> inner contents</span>
 <span id=sibling> Sibling contents</span>
 End of outer contents.</span>
 End of body contents</span>
</p>
<p>
The sibling content begins to flow below the float.
Inner contents should be blue, and outer contents red.
Rules are "body {display: block; line-height: 200%;
width: 400px; height: 400px}, p{display: block}", "span {display: inline}".
Also "#outer {clear: right; color: red}", "#sibling {color: red}", and
"#inner {float: right; width: 130px; color: blue}".
<p>
All other properties of this page should be UA-default.
Your browser rendering of this page should look similar to this <a href="c83402.gif"> 
reference image </a> or to this <a href="d83402.gif">reference image</a>.


</BODY>
</HTML>

